<template>
  <div class="picker-overlay" @click="closePicker">
    <div class="picker-content" @click.stop>
      <div class="picker-header">
        <button @click="currentView === 'city' ? (currentView = 'province', highlightProvince(tempSelectedProvince)) : closePicker()">
          {{ currentView === 'city' ? '← 选择省份' : '取消' }}
        </button>
        <h3>{{ currentView === 'province' ? '选择省份' : `选择城市 - ${selectedProvince}` }}</h3>
        <button @click="confirmSelection" style="color: #007aff;">确定</button>
      </div>

      <!-- 省份列表 -->
      <div v-if="currentView === 'province'" class="picker-body province-list">
        <ul>
          <li 
		    v-for="province in provinces" 
			:key="province"
            @click="selectProvince(province)"
			:class="{ active: tempSelectedProvince === province }"
		  >
            {{ province }}
          </li>
        </ul>
      </div>

      <!-- 城市列表 -->
      <div v-else class="picker-body city-list">
        <ul>
          <li
            v-for="city in cities[selectedProvince]"
            :key="city"
            @click="tempSelectedCity = city"
            :class="{ active: tempSelectedCity === city }"
          >
            {{ city }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// 中国省份与城市数据（含特别行政区）
const provinces = [
  '北京', '天津', '河北', '山西', '内蒙古',
  '辽宁', '吉林', '黑龙江','上海', '江苏',
  '浙江', '安徽', '福建', '江西', '山东',
  '河南', '湖北', '湖南', '广东', '广西', '海南',
  '重庆', '四川', '贵州', '云南', '西藏',
  '陕西', '甘肃', '青海', '宁夏', '新疆',
  // 特别行政区
  '香港', '澳门', '台湾'
];

// 城市数据（可扩展）
const cities = {
  '北京': ['北京'],
  '天津': ['天津'],
  '河北': ['石家庄', '唐山', '秦皇岛', '邯郸', '邢台', '保定', '张家口', '承德', '沧州', '廊坊', '衡水'],
  '山西': ['太原', '大同', '阳泉', '长治', '晋城', '朔州', '晋中', '运城', '忻州', '临汾', '吕梁'],
  '内蒙古': ['呼和浩特', '包头', '乌海', '赤峰', '通辽', '鄂尔多斯', '呼伦贝尔', '巴彦淖尔', '乌兰察布', '兴安盟', '锡林郭勒盟', '阿拉善盟'],
  '辽宁': ['沈阳', '大连', '鞍山', '抚顺', '本溪', '丹东', '锦州', '营口', '阜新', '辽阳', '盘锦', '铁岭', '朝阳', '葫芦岛'],
  '吉林': ['长春', '吉林', '四平', '辽源', '通化', '白山', '松原', '白城', '延边'],
  '黑龙江': ['哈尔滨', '齐齐哈尔', '鸡西', '鹤岗', '双鸭山', '大庆', '伊春', '佳木斯', '七台河', '牡丹江', '黑河', '绥化', '大兴安岭'],
  '上海': ['上海'],
  '江苏': ['南京', '无锡', '徐州', '常州', '苏州', '南通', '连云港', '淮安', '盐城', '扬州', '镇江', '泰州', '宿迁'],
  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
  '安徽': ['合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '滁州', '阜阳', '宿州', '六安', '亳州', '池州', '宣城'],
  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
  '江西': ['南昌', '景德镇', '萍乡', '九江', '新余', '鹰潭', '赣州', '吉安', '宜春', '抚州', '上饶'],
  '山东': ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照', '莱芜', '临沂', '德州', '聊城', '滨州', '菏泽'],
  '河南': ['郑州', '开封', '洛阳', '平顶山', '安阳', '鹤壁', '新乡', '焦作', '濮阳', '许昌', '漯河', '三门峡', '南阳', '商丘', '信阳', '周口', '驻马店', '济源'],
  '湖北': ['武汉', '黄石', '十堰', '宜昌', '襄阳', '鄂州', '荆门', '孝感', '荆州', '黄冈', '咸宁', '随州', '恩施', '仙桃', '潜江', '天门', '神农架'],
  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西'],
  '广东': ['广州', '深圳', '珠海', '汕头', '佛山', '韶关', '湛江', '肇庆', '江门', '茂名', '惠州', '梅州', '汕尾', '河源', '阳江', '清远', '东莞', '中山', '潮州', '揭阳', '云浮'],
  '广西': ['南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '玉林', '百色', '贺州', '河池', '来宾', '崇左'],
  '海南': ['海口', '三亚', '三沙', '儋州'],
  '重庆': ['重庆'],
  '四川': ['成都', '自贡', '攀枝花', '泸州', '德阳', '绵阳', '广元', '遂宁', '内江', '乐山', '南充', '眉山', '宜宾', '广安', '达州', '雅安', '巴中', '资阳', '阿坝', '甘孜', '凉山'],
  '贵州': ['贵阳', '六盘水', '遵义', '安顺', '毕节', '铜仁', '黔西南', '黔东南', '黔南'],
  '云南': ['昆明', '曲靖', '玉溪', '保山', '昭通', '丽江', '普洱', '临沧', '楚雄', '红河', '文山', '西双版纳', '大理', '德宏', '怒江', '迪庆'],
  '西藏': ['拉萨', '日喀则', '昌都', '林芝', '山南', '那曲', '阿里'],
  '陕西': ['西安', '铜川', '宝鸡', '咸阳', '渭南', '延安', '汉中', '榆林', '安康', '商洛'],
  '甘肃': ['兰州', '嘉峪关', '金昌', '白银', '天水', '武威', '张掖', '平凉', '酒泉', '庆阳', '定西', '陇南', '临夏', '甘南'],
  '青海': ['西宁', '海东', '海北', '黄南', '海南', '果洛', '玉树', '海西'],
  '宁夏': ['银川', '石嘴山', '吴忠', '固原', '中卫'],
  '新疆': ['乌鲁木齐', '克拉玛依', '吐鲁番', '哈密', '昌吉', '博尔塔拉', '巴音郭楞', '阿克苏', '克孜勒苏', '喀什', '和田', '伊犁', '塔城', '阿勒泰'],
  // 特别行政区
  '香港': ['香港'],
  '澳门': ['澳门'],
  '台湾': ['台北', '高雄', '台中', '花莲', '基隆', '新竹', '嘉义', '台南']
};

export default {
  props: {
    selectedCity: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tempSelectedCity: this.selectedCity, // 临时选中（用于预览）
	  tempSelectedProvince: '',
      selectedProvince: '',
      currentView: 'province', // 'province' or 'city'
      provinces: provinces,
      cities: cities
    };
  },
  methods: {
    selectProvince(province) {
      this.selectedProvince = province;
	  this.tempSelectedProvince = province;
      // 特别行政区直接确认
      if (['香港', '澳门', '台湾', '北京', '上海', '天津', '重庆'].includes(province)) {
        const city = this.cities[province][0];
        this.tempSelectedCity = city;
        this.confirmSelection();
      } else {
        this.currentView = 'city';
      }
    },
    confirmSelection() {
      const city = this.tempSelectedCity;
      if (city) {
        this.$emit('select', city); // 返回选中城市
      }else {
		alert('请先选择一个城市！'); // 提示用户选择城市
	  }
    },
    closePicker() {
      this.$emit('close'); // 关闭选择器
    },
	highlightProvince(provinceName) {
	  this.$nextTick(() => {
	    const activeProvince = document.querySelector('.province-list .active');
	    if (activeProvince) {
	      activeProvince.scrollIntoView({ block: 'center' });
	    }
	  });
	}
  },
  mounted() {
    // 如果有默认选中的城市，尝试反查其所属省份并设置状态
    if (this.selectedCity) {
      // 遍历所有省份，查找该城市属于哪个省
      for (const province in this.cities) {
        if (this.cities[province].includes(this.selectedCity)) {
          this.tempSelectedProvince = province;
          break;
        }
      }
  
      if (this.tempSelectedProvince) {
        this.selectedProvince = this.tempSelectedProvince;
        // 如果是特别行政区，直接关闭或确认（可选）
        if (['香港', '澳门', '台湾', '北京', '上海', '天津', '重庆'].includes(this.tempSelectedProvince)) {
          // 已选中，无需操作
          return;
        }
        // 默认进入城市视图，并滚动到对应城市
        this.currentView = 'city';
        this.$nextTick(() => {
          const activeCity = document.querySelector('.city-list .active');
          if (activeCity) {
            activeCity.scrollIntoView({ block: 'center' });
          }
        });
      } else {
        console.warn(`未找到城市 "${this.selectedCity}" 所属的省份`);
      }
    } else {
      this.currentView = 'province';
    }
  }
};
</script>

<style scoped>
.picker-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 999;
}

.picker-content {
  width: 100%;
  max-height: 80vh;
  background: white;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  background: #f8f8f8;
}

.picker-header h3 {
  margin: 0;
  font-size: max(8rpx, 16px);
  font-weight: 600;
}

.picker-header button {
  background: none;
  border: none;
  font-size: max(7rpx, 14px);
  cursor: pointer;
}

.picker-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 20rpx;
}

.picker-body ul{
	padding: 0;
}

.picker-body ul li {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  list-style: none;
}

.province-list li.active {
  background-color: #007aff;
  color: white;
}

.city-list li.active {
  background-color: #007aff;
  color: white;
}

</style>